<template>
    <el-menu
    :default-active="$route.path" 
      mode="horizontal"
      style="color: #fff; background-color: rgb(17 28 36);"
      :ellipsis="false"
      @select="handleSelect"
	  class="nav"
    >
      <el-menu-item index="home" class="logo" >	
        算法打卡平台
     </el-menu-item>
<!--      <el-menu-item index="1" >
        <template #title>公告栏</template>
      </el-menu-item>
	  -->
      <el-sub-menu index="2"  style="color: #fff !important;"  v-if="datas.level!='100'">
        <template #title>历史答题</template>
  
		<el-menu-item index="history/all" >
		  <template #title>所有记录</template>
		</el-menu-item>
        <el-menu-item index="wronglist">错题集</el-menu-item>
      </el-sub-menu>
	  
	  <el-menu-item index="question/list" v-else >
	    <template #title >试题记录</template>
		</el-menu-item>
		
      <el-menu-item index="today" v-if="datas.level!='100'">
        <template #title>今日打卡</template>
      </el-menu-item>
      <el-menu-item index="everycheck"  v-if="datas.level!='100'">
        <template #title>打卡日历</template>
      </el-menu-item>
	  <el-menu-item index="everycheck"  v-if="datas.level=='100'">
	    <template #title>发布日历</template>
	  </el-menu-item>
      <el-menu-item index="top">
        <template #title>班级积分榜</template>
      </el-menu-item>
	  
	  <div style="width: 50%;margin: 0 0 0 auto; height: 100%; display: flex;" >
		  <div style="margin: auto 5% auto 18%;width: 350px;" > 上次登录时间：{{datas.lasttime}}</div>
		   <div style="margin: auto 5% auto 0;" v-text="datas.name"></div>
		  <div style="border-radius: 50%; border: 1px solid #e2e2e2;width: 55px ; height: 55px; margin:auto 5% auto 0;" > <img src="/src/assets/b.png" alt="" style="width: 100%; border-radius: 50%; border: 1px solid #e2e2e2; "> </div>
		<div style="margin: auto 0;">
			<el-popover
			      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; "
			    >
			      <template #reference>
			      <el-icon   ><ArrowDown /></el-icon>
			      </template>
			      <template #default>
			          <div style=" display: flex; flex-direction: column; text-align: center;">
			         <!--   <a href="/user">个人管理</a> -->
			            <p @click="logout">退出登录</p>
			          </div>
			      </template>
			    </el-popover>
		</div>
	  
	  </div>
    </el-menu>

  </template>
  
  <script lang="ts" setup>
  import axios from 'axios';
  import { ref,reactive,onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import {ElMessage} from 'element-plus'
  import moment from 'moment';
  const activeIndex = ref('/')
  const router = useRouter()
  const datas = reactive({
	  name:'',
	  level:100,
	  lasttime:'',
  })
  const logout =()=>{
	  localStorage.removeItem("token")
	  localStorage.removeItem("name")
	  localStorage.removeItem("role")
	  localStorage.removeItem("TEL")
	  localStorage.removeItem("email")
	  localStorage.removeItem("auth_level")
	  localStorage.removeItem("class_name")
	  localStorage.removeItem("xuhao")
	    localStorage.removeItem("classid")
	  router.push('/')
  }
   const getuser = async () => {
      try {
        const response = await axios.get('/loginv1/authentication/users',{
		  headers: {
			'TOKEN': localStorage['token']
		  },
		  })
        const data = response.data
        if (data.code == 0) {
			datas.name = data.data.username
			localStorage.setItem("name",data.data.username)
			localStorage.setItem("role",data.data.role?data.data.role:0)
			localStorage.setItem("TEL",data.data.telephone?data.data.telephone:1644241154)
			localStorage.setItem("email",data.data.email)
			localStorage.setItem("auth_level",data.data.auth_level)
			localStorage.setItem("class_name",data.data.class_name)
			localStorage.setItem("classid",data.data.class_id)
			localStorage.setItem("xuhao",data.data.student_id)
			datas.level = data.data.auth_level
			const date = new Date(data.data.last_login)
			const formattedTime = moment(date).format('YYYY-MM-DD HH:mm:ss')
			datas.lasttime = formattedTime
			await getpoint(data.data.username)
        } else {
			ElMessage.error('会话已过期，请重新登录')
			setTimeout(()=>{
					localStorage.removeItem("token")
					localStorage.removeItem("name")
					localStorage.removeItem("role")
					localStorage.removeItem("TEL")
					localStorage.removeItem("email")
					localStorage.removeItem("auth_level")
					localStorage.removeItem("class_name")
					localStorage.removeItem("xuhao")
					router.push('/')
				},1000)
			
        }
      } catch (error) {
        console.error(error)
      }
    }
	
const getpoint= async (name:string)=>{
	try {
	  const response = await axios.get('/login/v1/point/points?username='+name,{
			  headers: {
				'TOKEN': localStorage['token']
			  }
			  })
	  const data = response.data
	  if (data.code == 0) {
			localStorage.setItem("point",data.data.points)
	  } 
	} catch (error) {
	  console.error(error)
	}
}
  const handleSelect = (key: string, keyPath: string[]) => {
    router.push('/'+key)
  }
  
  onMounted (() =>{
	  getuser()
  })
  
  </script>
	
  <style>
  .el-menu{
    height: 20%;
    background-color: #fff;
    width: 100%;
  }
.logo{
    line-height: 2;
    display: inline;
    width: auto;
    text-align: justify;
    text-align-last: justify;
}

.no-underline {
  text-decoration: none;
}
.no-underline1 {
  text-decoration: none;
}
.nav .el-menu-item,.el-sub-menu__title{
	color: #fff !important; 
}
.nav .el-menu-item:hover,.el-sub-menu__title:hover{
	color: #000 !important; 
	
}
.nav a:hover{
	background-color: rgba(60, 60, 60, 0.29)!important;
}
  </style>
  